import { createSlice } from '@reduxjs/toolkit'
const colors = ['#165DFF','#05A4B6','#bA3AC7','#F93920','#F0B114']
const colors2 = ['#65b2fc', '#f6d86f',
    '#58cbd3', '#7acc7f', '#a7abb0',
    '#8090d3', '#62c3f5', '#add37e',
    '#b7e35b', '#fdc165', '#f27396',
    '#c86fd0', '#fb9078', '#51caba', '#a67fdd', '#fce865']
const styleStore = createSlice({
    name: 'style',
    initialState: {
        mwidth: 240,
        showBtnTool: false,
        colors: colors,
        colors2: colors2,
        headerStyle: '#FFFFFF',
        sideStyle: '#FFFFFF',
        headerTheme: 'light',
        sideTheme: 'light',
        themeVal: {
            header: 1,
            side: 1
        }
    },
    reducers: {
        getCurrW(state, action) {
            state.mwidth = action.payload
        },
        setShowBtnTool(state, action) {
            state.showBtnTool = action.payload
        },
        setThemeStyle(state, action) {
            state.themeVal = action.payload
            if (action.payload.header === 1) {
                state.headerStyle = '#FFFFFF'
                state.headerTheme = 'light'
            } else {
                state.headerTheme = 'dark'
            }
            if (action.payload.side === 1) {
                state.sideStyle = '#FFFFFF'
                state.sideTheme = 'light'
            } else {
                state.sideTheme = 'dark'
            }
            if (action.payload.header === 2) {
                state.headerStyle = '#165DFF'
            }
            if (action.payload.header === 3) {
                state.headerStyle = '#17171A'
            }
            if (action.payload.side === 2) {
                state.sideStyle = '#165DFF'
            }
            if (action.payload.side === 3) {
                state.sideStyle = '#17171A'
            }
        }
    }
})

const { getCurrW, setShowBtnTool, setColor, setThemeStyle } = styleStore.actions
const reducer = styleStore.reducer

export { getCurrW, setShowBtnTool, setColor, setThemeStyle }


export default reducer

